<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <script src="./js/echarts/echarts.5.0.0.js"></script>
    <script src="./js/echarts/theme/shine.js"></script>
    <title>入门案例</title>
</head>
<style>
    #chart-1, #chart-2 {
        width: 400px;
        height: 400px;
        display: inline-block;
    }
</style>
<body>
<div id="chart-1"></div>
<div id="chart-2"></div>
</body>
<script>
    /**
     * 接收三个参数,dom、主题、渲染模式,默认是canvas
     * 单个图表
     */
    echarts.init(document.getElementById("chart-1"), "shine", {renderer: "svg"}).setOption({
        title: {
            text: 'ECharts 入门案例',
            textStyle: {
                fontSize: 12,
                color: '#666'
            },
            left: 25,
            top: 20
        },
        // x轴数据
        xAxis: {
            data: ['食品', '数码', '服饰', '箱包'],
            axisTick: {
                alignWithLabel: true,
                lineStyle: {
                    color: '#f00' // 刻度颜色
                }
            },
            axisLine: {
                lineStyle: {
                    color: '#ff0' // 线条颜色
                }
            },
            axisLabel: {
                color: '#00f' // 文字颜色
            }
        },
        // y轴数据
        yAxis: {
            splitLine: {
                lineStyle: {
                    type: 'dotted',
                    color: '#eee'
                }
            },
            axisLine: {
                show: true // 线段
            },
            axisTick: {
                show: true // 刻度线
            }
        },
        // 单个图标展示样式
        series: {
            type: 'bar',
            data: [100, 120, 90, 150],
        }
    })

    /**
     * 多个图表
     */
    echarts.init(document.getElementById("chart-2"), "shine", {renderer: "svg"}).setOption({
        title: {
            text: 'ECharts 入门案例'
        },
        // x轴数据
        xAxis: {
            data: ['食品', '数码', '服饰', '箱包']
        },
        // y轴数据
        yAxis: {},
        // 多个图表展示样式
        series: [
            {
                type: 'bar',
                data: [100, 120, 90, 150]
            },
            {
                type: 'bar',
                data: [10, 100, 120, 150]
            },
            {
                type: 'line',
                data: [100, 120, 90, 150]
            }
        ]

    })


</script>
</html>
